import React, { RefObject, useRef, useState } from 'react'
import style from './style.less';
import { Button, DatePickerRef, Dialog, Form, ImageUploadItem, ImageUploader, Input, NoticeBar, Picker, Space, TextArea, Toast } from 'antd-mobile';
import { CameraOutline, CloseCircleOutline, CompassOutline, LocationFill } from 'antd-mobile-icons';
import PriceArea from '@/components/jiagequjian';
import SAC from '@/images/supply/Image.png'
import { divide } from 'lodash';
export default () => {
  // const form = Form.useForm();
  const maxCount = 1
  const maxCount1 = 5
  const [fileList, setFileList] = useState<ImageUploadItem[]>([])
  const basicColumnsm = [
    [
      { label: '北京', values: '18' },
      { label: '上海', values: '19' },
      { label: '深圳', values: '20' },
      { label: '重庆', values: '30' },
      { label: '武汉', values: '31' },
    ],
    [
      { label: '巴南', values: '21' },
      { label: '渝北', values: '90' },
    ],
  ]
  const basicColumnsl = [
    [
      { label: '北京', value: '1' },
      { label: '美国', value: '2' },
      { label: '重庆', value: '3' },
      { label: '武汉', value: '4' },
      { label: '长安', value: '5' },
    ],
    [
      { label: '巴南', value: '6' },
      { label: '渝北', value: '7' },
      { label: '江北', value: '8' },
      { label: '渝中', value: '9' },
      { label: '九龙坡区', value: '10' },
    ],
  ]
  const basicColumnsb = [
    [
      { label: '周一', value: '11' },
      { label: '周二', value: '12' },
      { label: '周三', value: '13' },
      { label: '周四', value: '14' },
      { label: '周五', value: '15' },
    ],
    [
      { label: '上午', value: '16' },
      { label: '下午', value: '17' },
    ],
  ]
  const [values, setValues] = useState<(string | null)[]>([])
  const [value, setValue] = useState<(string | null)[]>([])
  const [valuel, setValuel] = useState<(string | null)[]>([])
  const priceArea = useRef<any>()

  const changePriceArea = (value: number[]) => {
    priceArea.current = { ...value }
  }

  const submit = (values: any) => {
    console.log(values)
  }

  const mockUpload = (file: File) => {

    return {
      url: URL.createObjectURL(file),
    }
  }

  return (
    <div className={style.page}>
      <div className={style.content}>
        <Form
          layout='horizontal'
          onFinish={submit}
          requiredMarkStyle='none'
          footer={(
            <div className={style['btn-warp']}>
              <div>
                <Button block color='success' size='large' type='submit' >
                  提交
                </Button>
              </div>
            </div>)}
        >
          <div className={style.block}>
            <div className={style.title}>基本信息</div>
            <Form.Item
              label='商品分类'
              name='username'
              rules={[{ required: true, message: '商品分类不能为空!' }]}
              extra={
                <Picker
                  columns={basicColumnsm}
                  value={values}
                  onConfirm={setValues}
                  onSelect={(val, extend) => {
                    console.log('onSelect', val, extend.items)
                  }}
                >
                  {(items, { open }) => {
                    return (
                      <Space align='center' onClick={open}>
                        {items.every(item => item === null)
                          ? '请输入'
                          : items.map(item => item?.label ?? '请输入').join(' - ')}
                      </Space>
                    )
                  }}
                </Picker>
              }
            >
            </Form.Item>
            <NoticeBar
              content='开票名称：白菜（如未匹配，请修改商品名称）'
              wrap
              color='alert'
              icon={<LocationFill />}
            />
            <Form.Item
              label='商品名称'
              name='shangpingming'
              rules={[{ required: true, message: '姓名不能为空!' }]}
            >
              <Input
                placeholder='请输入'
                style={{ '--text-align': 'right' }}

                clearable
              />
            </Form.Item>
            <Form.Item
              label='商品产地'
              name='username'
              rules={[{ required: true, message: '产地不能为空!' }]}
              onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                datePickerRef.current?.open()
              }}
              extra={
                <Picker
                  columns={basicColumnsl}
                  value={valuel}
                  onConfirm={setValuel}
                  onSelect={(val, extend) => {
                    console.log('onSelect', val, extend.items)
                  }}
                >
                  {(items, { open }) => {
                    return (
                      <Space align='center' onClick={open}>
                        {items.every(item => item === null)
                          ? '请输入'
                          : items.map(item => item?.label ?? '请输入').join(' - ')}
                      </Space>
                    )
                  }}
                </Picker>
              }
            >
            </Form.Item>
            <Form.Item
              label='商品发货地'
              name='username'
              rules={[{ required: true, message: '商品发货地不能为空!' }]}
              onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                datePickerRef.current?.open()
              }}
              extra={
                <Picker
                  columns={basicColumnsb}
                  value={value}
                  onConfirm={setValue}
                  onSelect={(val, extend) => {
                    console.log('onSelect', val, extend.items)
                  }}
                >
                  {(items, { open }) => {
                    return (
                      <Space align='center' onClick={open}>
                        {items.every(item => item === null)
                          ? '请输入'
                          : items.map(item => item?.label ?? '请输入').join(' - ')}
                      </Space>
                    )
                  }}
                </Picker>
              }
            >
            </Form.Item>
            <Form.Item
              label='商品单价'
              name='shangpingjia'
              rules={[{ required: true, message: '商品单价不能为空!' }]}

            >
              <PriceArea />
            </Form.Item>
            <Form.Item
              label='商品数量'
              name='shangpingshul'
              rules={[{ required: true, message: '商品数量不能为空!' }]}
              extra='斤'
            >
              <Input
                placeholder='请输入'
                style={{ '--text-align': 'right' }}
                clearable

              />
            </Form.Item>
          </div>
        </Form>
        <div className={style.price}>
          <div className={style.title}>
            商品图片
            <span>(最多上传1张)</span>
          </div>
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
            maxCount={1}
            showUpload={fileList.length < maxCount}
            onCountExceed={exceed => {
              Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`)
            }}
            onDelete={() => {
              return Dialog.confirm({
                content: '是否确认删除',
              })
            }}
          >
            <img src={SAC} alt="图片上传" className={style.img} />
          </ImageUploader>
        </div>
        <div className={style.price}>
          <div className={style.title}>
            商品资质
            <span>(非必填,最多上传5张)</span>
          </div>
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
            maxCount={5}
            showUpload={fileList.length < maxCount1}
            onCountExceed={exceed => {
              Toast.show(`最多选择 ${maxCount1} 张图片，你多选了 ${exceed} 张`)
            }}
            onDelete={() => {
              return Dialog.confirm({
                content: '是否确认删除',
              })
            }}
          >
            <img src={SAC} alt="图片上传" className={style.img} />
          </ImageUploader>
        </div>
        <div className={style.block}>
          <div className={style.title}>商品描述</div>
          <TextArea
            placeholder='请输入'
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        </div>
      </div>

    </div>



  )
}

